import React, { Component } from 'react';
import {Button , Collapse} from 'element-react';
import {Link } from "react-router-dom";
import Devicepage from '../Devicepage';
import Lendpage from '../Lendpage';
import Userpage from '../Userpage';
import Approverpage from '../Approverpage';
import {useNavigate} from "react-router-dom";
import PubSub from "pubsub-js";
import './index.css';
import { connect } from 'react-redux';
import {createLoginAction} from '../../redux/actions/loginAction';


class NagtivebarUI extends Component {

    state = {
        navigator:[
            {id :1 ,name: "通用设置" , path:"0"},
            {id :2 ,name: "人员设置" , path:"1"},
            {id :3 ,name: "分类维护" , path:"2"},
            {id :4 ,name: "设备管理" , path:"3"},
            {id :5 ,name: "维护计划" , path:"4"},
            {id :6 ,name: "系统设置" , path:"5"},
            {id :7 ,name: "出借管理" , path:"6"},
            {id :8 ,name: "审批中心" , path:"7"},
            {id :9 ,name: "个人消息" , path:"8"},
            {id :10 ,name: "仓库管理" , path:"9"}
        ],
        wintab:[0,1,2,3,4,5,6,7,8,9,10]
    }

    // <Route  path='0' element={<div>122222222222222</div>}></Route>
    // <Route  path='1' element={<Userpage/>}></Route>
    // <Route  path='2' element={<DeviceManage/>}></Route>
    // <Route  path='3' element={<Devicepage/>}></Route>
    // <Route  path='4' element={<div>维护计划</div>}></Route>
    // <Route  path='5' element={<div>系统设置</div>}></Route>
    // <Route  path='6' element={<Lendpage/>}></Route>
    // <Route  path='7' element={<Approverpage/>}></Route>
    // <Route  path='8' element={<div>个人消息中心</div>}></Route>
    // <Route  path='' element={<Theme/>}></Route>


    componentDidMount(){
            const {role} = this.props.userInfo
            let tabsmate = []
            switch ( role ){
                case 4:
                tabsmate = [
                    {id : 1 ,name: "人员设置" , },
                    {id : 2 ,name: "分类维护" , },
                    {id : 3 ,name: "设备管理" },
                    {id : 4 ,name: "维护计划" },
                    {id : 5 ,name:"出借管理"},
                    {id : 6 ,name :"组织管理"},
                    {id:7 , name :"流程管理"},
                    {id:8 , name :"统一审批"},
                    {id:9 , name :"维修计划"},
                ]
                break ;
                case 3 :
                tabsmate = [
                    {id : 1 ,name: "仓库管理" ,}
                ]
                break ;
                case 2 :
                tabsmate = [
                    {id : 1  ,name: "出借管理" },
                    {id : 2 , name: "审批中心" },
                    {id:3 , name :"统一审批"},
                ]
                break;
                case 1 :
                tabsmate = [
                    {id : 1 ,name: "出借管理" },
                ]
                    break;
                default:
                break ;
            }
            this.setState({navigator:tabsmate})
    }

    onOpen() {

    }
    
    onClose() {
    
    }

    tabsonClick(index){
        PubSub.publish("addtabs" , index)
    }

    render() {
        return (
            <div className='nagtivebar'>

            {/* <div>                            
                <Collapse accordion>
                    <Collapse.Item title={<span>系统设置<i className="header-icon el-icon-information"></i></span>}>
                    <Link key={123} to = {"2"} style={{paddingTop:"10px"}}> 
                            <Button style={{marginTop:'10px'}} type='primary'>{"设备管理"}</Button>
                    </Link> 
                    </Collapse.Item>
                    <Collapse.Item title="反馈 Feedback">
                        <div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>
                        <div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>
                    </Collapse.Item>
                    <Collapse.Item title="效率 Efficiency">
                        <div>简化流程：设计简洁直观的操作流程；</div>
                        <div>清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；</div>
                        <div>帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。</div>
                    </Collapse.Item>
                    <Collapse.Item title="可控 Controllability">
                        <div>用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；</div>
                        <div>结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。</div>
                    </Collapse.Item>
                </Collapse>
            </div> */}

                {
                    // this.state.navigator.map((router)=>{
                    //     return (
                    //         <Link key={router.id} to = {router.path} style={{paddingTop:"10px"}}> 
                    //          <Button style={{marginTop:'10px'}} type='primary'>{router.name}</Button>
                    //         </Link> 
                    //     )
                    // })
                } 
                {
                    this.state.navigator.map((item)=>{
                        return (
                            <span style={{paddingTop:"10px"}}>
                                <Button key={item.id} style={{marginTop:'10px'}} onClick={()=>{this.tabsonClick(item.id-1)}} type='primary'>{item.name}</Button> 
                            </span>
                        )
                    })
                }
            
            </div>
        );
    }
}
export default connect(
    state=>({userInfo:state.login}),
    {
      userlogin:createLoginAction
    }
)(NagtivebarUI)